<template>
  <el-table
    :data="data"
    empty-text="暂无数据"
    style="
      width: 100%;
      height: 284px;
      --el-table-tr-bg-color: transparent;
      --el-table-bg-color: transparent;
      --el-table-text-color: #fff;
      --el-table-header-text-color: #fff;
      --el-table-header-bg-color: transparent;
      --el-table-border: 0;
      --el-table-row-hover-bg-color: transparent;
      --el-table-border-color: transparent;
    "
  >
    <el-table-column prop="code" label="网格" />
    <el-table-column prop="flow" label="流量" align="right" />
    <el-table-column prop="capacity" label="容量" align="right" />
    <el-table-column prop="capacityFlowRatio" label="容流比" align="right" />
    <el-table-column prop="crowLevel" label="拥挤等级" align="right" />
    <el-table-column prop="conflict" label="冲突" align="right" />
  </el-table>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import api from "@/api/statistics";

const data = ref([]);

onMounted(() => {
  getSituation();
});

const getSituation = async () => {
  const result = await api.getSituation();
  if (result.code === 200) {
    data.value = result.data || [];
  } else {
    ElMessage.error(result.msg);
  }
};
</script>

<style scoped></style>
